---
title: Text
package: "@chakra-ui/layout"
description: Text is the used to render text and paragraphs within an interface.
---

import ComponentLinks from "../../../src/components/component-links"

`Text` component is the used to render text and paragraphs within an interface.
It renders a `<p>` tag by default.

<ComponentLinks
  github={{ package: "layout" }}
  npm={{ package: "@chakra-ui/layout" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import { Text } from "@chakra-ui/react"
```

## Changing the font size

To increase the font size of the text, you can pass the `fontSize` prop.

```jsx
<Stack spacing={3}>
  <Text fontSize="6xl">(6xl) In love with React & Next</Text>
  <Text fontSize="5xl">(5xl) In love with React & Next</Text>
  <Text fontSize="4xl">(4xl) In love with React & Next</Text>
  <Text fontSize="3xl">(3xl) In love with React & Next</Text>
  <Text fontSize="2xl">(2xl) In love with React & Next</Text>
  <Text fontSize="xl">(xl) In love with React & Next</Text>
  <Text fontSize="lg">(lg) In love with React & Next</Text>
  <Text fontSize="md">(md) In love with React & Next</Text>
  <Text fontSize="sm">(sm) In love with React & Next</Text>
  <Text fontSize="xs">(xs) In love with React & Next</Text>
</Stack>
```

### Truncate text

Pass the `isTruncated` prop to render an ellipsis when the text exceeds the
width of the viewport or `maxWidth` prop.

```jsx
<Text color="gray.500" isTruncated>
  Lorem ipsum is placeholder text commonly used in the graphic, print, and
  publishing industries for previewing layouts and visual mockups.
</Text>
```

Likewise, if you'd like to truncate the text after a specific number of lines,
pass the `noOfLines` prop and set it to the desired no of lines.

> Pro Tip 💡: You can also apply `noOfLines` responsively.

```jsx live=false
// Basic version
<Text noOfLines={2}>
  "The quick brown fox jumps over the lazy dog" is an English-language pangram—a
  sentence that contains all of the letters of the English alphabet. Owing to
  its existence, Chakra was created.
</Text>

// Responsive version
<Text noOfLines={[1, 2, 3]}>
   "The quick brown fox jumps over the lazy dog" is an English-language pangram—a
  sentence that contains all of the letters of the English alphabet. Owing to
  its existence, Chakra was created.
</Text>
```

### Override style

You can change the entire style of the text via props. For example, to change
the font size, pass the `fontSize` prop. No need to write `css` or `styled()`.

```jsx
<Text fontSize="50px" color="tomato">
  I'm using a custom font-size value for this text
</Text>
```

### Override the element

To override the element that gets rendered, pass the `as` prop. Use **Inspect
Element** to see the element that gets rendered in html.

```jsx
<>
  <Text as="i">Italic</Text>
  <br />
  <Text as="u">Underline</Text>
  <br />
  <Text as="abbr">I18N</Text>
  <br />
  <Text as="cite">Citation</Text>
  <br />
  <Text as="del">Deleted</Text>
  <br />
  <Text as="em">Emphasis</Text>
  <br />
  <Text as="ins">Inserted</Text>
  <br />
  <Text as="kbd">Ctrl + C</Text>
  <br />
  <Text as="mark">Highlighted</Text>
  <br />
  <Text as="s">Strikethrough</Text>
  <br />
  <Text as="samp">Sample</Text>
  <br />
  <Text as="sub">sub</Text>
  <br />
  <Text as="sup">sup</Text>
</>
```

## Props

`Text` composes the [Box](/docs/layout/box) component, so you can pass all `Box`
style props.

<PropsTable of="Text" omit={null} />
